<template>
    <div class="serFaci" ref="clientHeight">
        <div class="subSer">
          <div :model="type1" @click="type1btn(serviceList[0].id)" class="btn btn1" ref="btn1" :style="{'line-height':btnLh,'margin-top':btn1Mgt}">
            <img src="../assets/nl/foodSer.png" alt="">
            <span>餐饮服务</span>
          </div>
        <div :model="type2" @click="type2btn(serviceList[1].id)" class="btn btn2" ref="btn2" :style="{'line-height':btnLh}">
          <img src="../assets/nl/wifi.png" alt="">
          <span>无线上网</span>
        </div>
        <div :model="type3" @click="type3btn(serviceList[2].id)" class="btn btn3" ref="btn3" :style="{'line-height':btnLh}">
          <img src="../assets/nl/barFree.png" alt="">
          <span>无障碍通道</span>
        </div>
        <div :model="type4" @click="type4btn(serviceList[3].id)" class="btn btn4" ref="btn4" :style="{'line-height':btnLh}">
          <img src="../assets/nl/parkSer.png" alt="">
          <span>停车服务</span>
        </div>
          </div>
        <Modal v-model="type1tf" fullscreen title="Fullscreen Modal">
            {{type1text}}
        </Modal>      
    </div>
</template>

<script>
window.type1text;
window.type2text;
window.type3text;
window.type4text;
export default {
  name: "serFaci",
  data() {
    return {
      serviceList: [],
      type1tf: false,
      clientHeight: "",
      btnHeight: "",
      btnLh: "",
      btn1Mgt: "",
      type1: 1,
      type2: 2,
      type3: 3,
      type4: 4,
      type1text: "",
      type2text: "",
      type3text: "",
      type4text: ""
    };
  },
  created: function() {
    this.getcontent();    
  },
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
  },
  watch: {
    clientHeight: function() {
      this.changeBtnH(this.clientHeight);
    }
  },
  methods: {
    changeBtnH(clientHeight) {
      this.btnHeight = clientHeight * 18 / 100 + "px";
      this.btnLh = this.btnHeight;
      this.btn1Mgt = clientHeight * 1 / 20 + "px";
      this.$refs.btn1.style.height = this.btnHeight;
      this.$refs.btn2.style.height = this.btnHeight;
      this.$refs.btn3.style.height = this.btnHeight;
      this.$refs.btn4.style.height = this.btnHeight;
    },
    getcontent() {
      this.$axios({
        method: "post",
        url: "https://vip.gznewpark.com/dist/admin/public/index.php/wx/Shop/serviceList"
      }).then(response => {
        this.serviceList = response.data.result;
        
      });
    },
    type1btn(id) {           
      this.$router.push({
        path: "/faciDetail",
        query: {
          id: id
        }
      });
    },
    type2btn(id) {        
      this.$router.push({
        path: "/faciDetail",
        query: {
          id: id
        }
      });      
    },
    type3btn(id) {       
      this.$router.push({
        path: "/faciDetail",
        query: {
          id: id
        }
      });
    },
    type4btn(id) {      
      this.$router.push({
        path: "/faciDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style scoped>
@media screen and (max-width: 410px) {
  .serFaci {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding-left: 3%;
  }
  .btn {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    width: 94%;
    margin-bottom: 7%;
    margin-left: 1%;
    font-size: 1.2rem;
    border-radius: 0.5rem;
  }
  .btn img {
    width: 10%;
    vertical-align: middle;
    padding-right: 2%;
  }
  .btn1 {
    background-color: #7848ff;
    box-shadow: 0.1rem 0.1rem 0.1rem #7848ff;
  }
  .btn2 {
    background-color: #ce9d53;
    box-shadow: 0.1rem 0.1rem 0.1rem #ce9d53;
  }
  .btn3 {
    background-color: #7546ff;
    box-shadow: 0.1rem 0.1rem 0.1rem #7546ff;
  }
  .btn4 {
    background-color: #cc9a4f;
    box-shadow: 0.1rem 0.1rem 0.1rem #cc9a4f;
  }
}

@media screen and (min-width: 411px) {
  .serFaci {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding-left: 3%;
  }
  .btn {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    width: 94%;
    margin-bottom: 8%;
    margin-left: 1.5%;
    font-size: 1.3rem;
    border-radius: 0.5rem;
  }
  .btn img {
    width: 12%;
    vertical-align: middle;
    padding-right: 3%;
  }
  .btn1 {
    background-color: #7848ff;
    box-shadow: 0.1rem 0.1rem 0.1rem #7848ff;
  }
  .btn2 {
    background-color: #ce9d53;
    box-shadow: 0.1rem 0.1rem 0.1rem #ce9d53;
  }
  .btn3 {
    background-color: #7546ff;
    box-shadow: 0.1rem 0.1rem 0.1rem #7546ff;
  }
  .btn4 {
    background-color: #cc9a4f;
    box-shadow: 0.1rem 0.1rem 0.1rem #cc9a4f;
  }
}
</style>
